<template>
    <div class="prizeBox" :style="itemStyle" :id="'prizeBox'+pos">
        <div class="title" v-text="getTitle(obj.couponSort,itemType)"></div>
        <span class="arrow"></span>
        <div class="prizeContent" v-if=" gifsType == '992010' || gifsType == '992020'" >
            <div class="row">
                <span class="rowTitle">奖项名称:</span>
                <span class="rowContent" v-text="getName(name)"></span>
            </div>
            <div class="row">
                <span class="rowTitle">优惠券:</span>
                <span class="rowContent" v-text="prizeType"></span>
            </div>
            <div class="row" v-show="prizeType == '优惠券'">
                <span class="rowTitle">消费金额:</span>
                <span class="rowContent">{{costMoney}}元</span>
            </div>
            <div class="row">
                <span class="rowTitle">优惠金额:</span>
                <span class="rowContent">{{offMoney}}元</span>
            </div>
            <div class="row">
                <span class="rowTitle">中奖机率:</span>
                <span class="rowContent">{{rate}}/100000</span>
            </div>
            <div class="row" v-show="prizeType == '优惠券'">
                <span class="rowTitle">使用时段:</span>
                <span class="rowContent" v-text="useTime"></span>
            </div>
            <!-- <div class="row">
                <span class="rowTitle">使用类型:</span>
                <span class="rowContent" v-text="item.useType"></span>
            </div> -->
            <div class="row">
                <span class="rowTitle">有效期:</span>
                <span class="rowContent" v-text="time"></span>
            </div>
        </div>
        <div class="prizeContent" v-else>
            <div class="row">
                <span class="rowTitle">礼品名称:</span>
                <span class="rowContent" v-text="getName(name)"></span>
            </div>
            <div class="row" style="display:flex;justify-content:center">
                <img :src="PIC_URL+img" @click="enlargeImg">
            </div>
            <div class="row">
                <span class="rowTitle">中奖机率:</span>
                <span class="rowContent">{{rate}}/100000</span>
            </div>
            <div class="row">
                <span class="rowTitle">有效期:</span>
                <span class="rowContent" v-text="time"></span>
            </div>
        </div>
        <div class="btns" v-if="type== '1'">
            <div class="prizebtn" @click="del" v-show="(repeatRecord == 0 && !isDone)">删除</div>
            <div class="prizebtn" v-show="!isDone" @click="edit">修改</div>
            <div class="prizebtn" @click="detail">详情</div>
        </div>
    </div>
</template>
<script>
let position = {
    '1':'一',
    '2':'二',
    '3':'三',
    '4':'四',
    '5':'五',
    '6':'六',
    '7':'七',
    '8':'八',
    '9':'九',
    '10':'十',
    '11':'十一',
    '12':'十二',
}
let timeType = {
    '3':'峰时',
    '2':'平时',
    '1':'谷时'
}
import {DELETE_RED_PACKAGE_OR_COUPONrULE_BY_ID,DELETE_GIFTS_BY_ID} from '@/config/url'
import Bus from '@/bus.js'

export default {
    props:[
        'obj',//对象
        'pos',//奖项几
        'type',//是否显示按钮 1显示
        'leng',//个数
        'firstContent',//初录数据
        'isDone'
        ],
    data(){
        return {
            item:this.obj, 
            itemStyle:'',
            itemType:null,
            prizeType:null,
            costMoney:null,
            offMoney:null,
            rate:null,
            useTime:null,
            time:null,
            name:null,
            id:this.obj.id,
            img:'',
            discountsPattern:null,
            gifsType:this.obj.gifsType,
            repeatRecord:sessionStorage.getItem('repeatRecord')
        }
    },
    created(){
        if(this.repeatRecord == 0){
            this.updataData()
        }else{
            if(this.item.isIdentical != null){
                this.updataData()
            }
        }
    },
    computed:{
        secCouponData(){
            this.updataData()
            return this.$store.getters.getSecCouponData
        }
    },
    watch:{
        // discountsPattern(val){
        //     this.titleType()
        // }
    },
    mounted(){
        this.titleType()
        this.isRedBorder()
        if(this.leng * 1 > 4 && this.leng < 7){
            let n = this.leng - 4
            this.itemStyle = `margin-right:-${n*2}%`
        }else if(this.leng > 6 && this.leng < 11){
            this.itemStyle = `margin-right:-6%`
        }else if(this.leng == 11){
            this.itemStyle = `margin-right:-5.7%`
        }else if(this.leng == 12){
            this.itemStyle = `margin-right:-5.5%`
        }else{
            this.itemStyle = 'margin-right:0.2rem'
        }
    },
    watch:{
        obj(val){
            this.item = val
            this.isRedBorder()
            this.updataData()
        }
    },
    methods:{
        titleType(){
            if(this.item.discountsPattern == '0'){
                this.itemType = '1'
            }else if(this.item.discountsPattern == '1'){
                this.itemType = '2'
            }else{
                this.itemType = '3'
            }
        },
        isRedBorder(){
            if(this.repeatRecord == 1){
                if(this.item.isIdentical == null || this.item.isIdentical == 1 ){
                    $('#ladder'+this.item.awardSort+' #prizeBox'+this.pos).css('border','1px solid red')
                }else{
                    $('#ladder'+this.item.awardSort+' #prizeBox'+this.pos).css('border','1px solid #A9D0FF')
                }
            }
        },
        updataData(){
            this.img = this.item.giftsPicturesUrl
            this.name = this.item.awardsName || this.item.giftsName
            this.titleType()
            this.gifsType = this.item.gifsType
            if(this.item.couponType == '992010'){
                this.prizeType = '优惠券'
            }else{
                this.prizeType = '红包'
            }
            this.costMoney = this.item.settingFullMoney
            if(this.item.discountsPattern == '0'){
                this.offMoney = this.item.settingReduceMoney || this.item.redPackageMoney
            }else{
                if(this.item.settingReduceMoney){
                    let money = this.item.settingReduceMoney.split(',')
                    this.offMoney = `${money[0]}~${money[1]}`
                }
            }
            this.rate = this.item.winningProbability
            if(this.item.useType){
               let arr1 = this.getUserType(this.item.useType)
                let arr = []

                for(let item of arr1){
                    if(item == 4){
                        arr.push(timeType[item-1])
                    }else{
                        arr.push(timeType[item])
                    }
                }
                this.useTime = arr.join('/') 
            }

            let deadLine = this.item.effectiveDeadline || this.item.receiveDeadline
            if(this.item.effectiveType == '0' || !this.item.effectiveType){
                if(deadLine){
                    this.time = deadLine.toString().split(':').join('到')
                }
            }else{
                if(/-/.test(deadLine)){
                    this.time = deadLine
                }else{
                    this.time = deadLine + '天'
                }
            }
        },
        getName(name){
            if(name){
                if(name.length > 8){
                    name = name.substr(0, 8) + '...'
                }
                return name;
            }
        },
        enlargeImg(e){
            this.$emit('enlargeImg',e)
        },
        getTitle(pos,type){
            let num = '奖项' + position[pos]
            let title = num
            switch(type){
            	case '1':
            		title += ' (固定金额)' 
            	break;
            	case '2':
            		title += ' (浮动金额)' 
            	break;
            	case '3':
            		title += ' (礼品)' 
            	break;
            }
            return title;
        },
        del(){
            this.$confirm('确认删除？')
                .then(_ => {
                    let that = this
                    let url = ''
                    let param = {}
                    // param.awardSort = this.item.awardSort
                    if(this.item.gifsType == '992010' || this.item.gifsType == '992020'){
                        url = DELETE_RED_PACKAGE_OR_COUPONrULE_BY_ID
                        param.couponRuleId = this.id
                    }else if(this.item.gifsType == '992030'){
                        url = DELETE_GIFTS_BY_ID
                        param.giftsId = this.id
                    }
                    if(this.itemType){
                        this.$fetch(url,param)
                            .then(res=>{
                                if(res.status == 1){
                                    Bus.$emit('refreshCoupon',this.$store.getters.getCurrentLottery)
                                    this.$message({
                                        message: res.data,
                                        type: 'success'
                                    });
                                }else{
                                    this.$message({
                                        message: res.data,
                                        type: 'warning'
                                    });
                                }
                            })
                            .catch(err=>{
                                console.log(err)
                                this.$message({
                                    message: '获取code失败',
                                    type: 'warning'
                                });
                            })
                    }else{
                        this.$fetch(DELETE_GIFTS_BY_ID,{
                            giftsId:this.id
                        })
                            .then(res=>{
                                if(res.status == 1){
                                    Bus.$emit('refreshCoupon',this.$store.getters.getCurrentLottery)
                                    this.$message({
                                        message: res.data,
                                        type: 'success'
                                    });
                                }else{
                                    this.$message({
                                        message: res.data,
                                        type: 'warning'
                                    });
                                }
                            })
                            .catch(err=>{
                                console.log(err)
                                this.$message({
                                    message: '获取code失败',
                                    type: 'warning'
                                });
                            })
                    }
                })
                .catch(_ => {});
        },
        edit(){
            this.$emit('detail',{
                item:this.item,
                type:'1',
                addType:this.itemType,
                dataID:this.id,
                pos:this.pos
                // firstID:this.firstContent?this.firstContent.id : null
            })
        },
        detail(){
            this.$emit('detail',{
                item:this.item,
                type:'2',
                addType:this.itemType,
                dataID:this.id,
                pos:this.pos
                // firstID:this.firstContent?this.firstContent.id : null
            })
        },
        getUserType(data){
            let arr = [1,2,4]
            let result = []

            for(let i=0;i<arr.length;i++){
                if(arr.includes(data)){
                    result.push(data)
                    break;
                }
                for(let j = 0 ;j<arr.length;j++){
                    let a = data - arr[i];
                    if(a > 0){
                        if((a - arr[j]) == 0){
                            if(!result.includes(arr[i])){
                                result.push(arr[i])
                            }
                        }
                    }
                }
                
            }
            return result.length > 0?result:arr
        }
    }
}
</script>
<style lang="less" scoped>
    @import '~_config/mixin.less';
    @color1:#A9D0FF;
    @color2:#3395FF;
    @color3:#F2F2F2;
    @color4:#8491AF;

    .prizeBox{
        .wh(290px,356px);
        border: 1px solid @color1;
        box-shadow:0px 2px 6px 0px rgba(51,149,255,0.1);
        border-radius:8px;
        position: relative;
        .bg(#fff);
        .title{
            .wh(99.7%,53px);
            .bg(@color1);
            .sc(20px,#fff);
            border-top-right-radius: 8px;
            border-top-left-radius: 8px;
            text-align: center;
            line-height: 53px;
        }
        .arrow{
            .wh(18px,15px);
            border-radius: 60%;
            .bg(#fff);
            transform: rotate(90deg);
            position: absolute;
            display: inline;
            left:.5rem;
            top: .24rem;
        }
        .prizeContent{
            width:100%;
            padding-top: .05rem;
            .row{
                width: 90%;
                margin: 0 auto;
                .fx(row,flex-start);
                margin-bottom: 11px;
                .rowTitle{
                    width:33%;
                    .sc(14px,#999);
                }
                .rowContent{
                    .sc(14px,#000);
                }
                img{
                    .wh(145px,145px);
                    cursor: pointer;
                }
            }
        }
        .btns{
            .fx(row,flex-end);
            margin-top: 28px;
            position: absolute;
            bottom: 5%;
            right: 3%;
            width: 56%;
            .prizebtn{
                .wh(66px,22px);
                .sc(14px,@color2);
                .fx();
                margin-right: 10px;
            }
            .prizebtn:nth-of-type(1){
                .bg(@color4);
                color:@color3;
            }
            .prizebtn:nth-of-type(2),
            .prizebtn:nth-of-type(3){
                border:1px solid rgba(51,149,255,1);
                border-radius:4px;
            }
        }
        &:hover{
            transform: scale(1.1);
            z-index: 1;
        }
    }

</style>
